<template>
  <div
    v-if="defaultWords.length > 0"
    class="cloud"
  >
    <ul>
      <span @click="goToList('')">全部</span>
      <span
        v-for="item in defaultWords"
        :key="item.id"
        class="hvr-pulse"
        @click="goToList(item.name)"
      >{{ item.name }}</span>
    </ul>
  </div>
</template>

<script>
import { getArticleLabel } from '@/api/api'
export default {
  data () {
    return {
      defaultWords: []
    }
  },
  created () {

  },
  mounted () {
    this.listLabels()
  },
  methods: {
    listLabels () {
      getArticleLabel(20).then((res) => {
        if (res.code === 200) {
          this.defaultWords = res.data.records
        }
      })
    },
    goToList (value) {
      this.$emit('func', value)
    }

  }
}
</script>
<style lang="less" scoped>
/*tags*/
.cloud {
    margin-left: 10px;
    clear: both;
    overflow: hidden;
    margin-bottom: 20px;
}
.cloud ul {
    overflow: hidden;
    font-size: 14px;
}
.cloud ul span {
    text-align: center;
    line-height: 25px;
    height: 25px;
    cursor: pointer;
    display: block;
    background: #999;
    float: left;
    padding: 0px 11px;
    margin: 10px 10px 0 0;
    border-radius: 8px;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    transition: all 0.5s;
    color: #fff;
}
.cloud ul span:nth-child(8n-7) {
    background: #8a9b0f;
}
.cloud ul span:nth-child(8n-6) {
    background: #eb6841;
}
.cloud ul span:nth-child(8n-5) {
    background: #3fb8af;
}
.cloud ul span:nth-child(8n-4) {
    background: #fe4365;
}
.cloud ul span:nth-child(8n-3) {
    background: #fc9d9a;
}
.cloud ul span:nth-child(8n-2) {
    background: #edc951;
}
.cloud ul span:nth-child(8n-1) {
    background: #c8c8a9;
}
.cloud ul span:nth-child(8n) {
    background: #83af9b;
}
.cloud ul span:first-child {
    background: #036564;
}
.cloud ul span:last-child {
    background: #3299bb;
}
.cloud ul span:hover {
    font-weight: 500;
    // background: linear-gradient(to right, #5f2c82, #49a09d);
    text-shadow: #000 1px 1px 1px;
}
</style>
